<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<!--  单向数据绑定:数据影响视图,视图不能影响数据  -->
    单向数据绑定: <input type="text" :value="msg"/>
    <br/>
    <hr/>
<!--  手动实现数据双向绑定:数据影响视图,视图影响数据  -->
<!--  下边的这段代码就是v-model的本质  -->
    双向数据绑定原理: <input type="text" :value="msg" @input="msg=$event.target.value"/>
    <br/>
    <hr/>
<!--  实现数据双向绑定  -->
    双向数据绑定: <input type="text" v-model="msg"/>
</div>
<script>
  const vm = new Vue({
    el:"#app",
    data(){
      return{
        msg:"hello Vue"
      }
    }
  })
</script>
</body>
</html>